import { ReactElement, useEffect, useState } from 'react'
import style from './index.module.less'
import { CaseSchema } from '@src/components/schema/caseSchema'
import { ScoreTotalSchema } from '@src/components/schema/scoreSchema'

function fixedNum (v: number): string {
  if (v === 0 || v === undefined || v === null) {
    return '0'
  }
  if (typeof v === 'number') {
    return v.toFixed(3)
  }
  return v
}

interface Props {
  caseDetail: CaseSchema | null
  score: ScoreTotalSchema | null
  loading: boolean
}

function Main ({ caseDetail, score, loading }: Props): ReactElement {
  const [processerTotal, setProcesserTotal] = useState('0')
  const [accepterTotal, setAccepterTotal] = useState('0')
  const [processerExam, setProcesserExam] = useState('0')
  const [accepterExam, setAccepterExam] = useState('0')
  const [accepterAdd, setAccepterAdd] = useState('0')
  const [accepterSubtract, setAccepterSubtract] = useState('0')
  const [processerAdd, setProcesserAdd] = useState('0')
  const [processerSubtract, setProcesserSubtract] = useState('0')
  const [accepterRatio, setAccepterRatio] = useState('0')
  const [processerRatio, setProcesserRatio] = useState('0')
  const [totalScore, setTotalScore] = useState('0')
  useEffect(() => {
    if (score !== null) {
      setAccepterTotal(fixedNum(score.accepter_score))
      setProcesserTotal(fixedNum(score.processer_score))
      setProcesserExam(fixedNum(score.processer_sample_score))
      setAccepterExam(fixedNum(score.accepter_sample_score))
      setAccepterAdd(fixedNum(score.accepter_positive_score))
      setAccepterSubtract(fixedNum(score.accepter_negative_score))
      setProcesserAdd(fixedNum(score.processer_positive_score))
      setProcesserSubtract(fixedNum(score.processer_negative_score))
      setAccepterRatio(fixedNum(score.accepter_ratio_score))
      setProcesserRatio(fixedNum(score.processer_ratio_score))
      setTotalScore(fixedNum(score.score))
    }
  }, [score])
  if (loading) {
    return <span />
  }
  return (
    <div className={style.container}>
      <div className={style.line}>
        <span className={style.score}>
          <span className={style['score-label']}>受理得分</span>
          <span className={style['score-value']}>{accepterTotal}</span>
        </span>
        <span className={style.score}>
          <span className={style['score-label']}>受理加分</span>
          <span className={style['score-value']}>{accepterAdd}</span>
        </span>
        <span className={style.score}>
          <span className={style['score-label']}>受理减分</span>
          <span className={style['score-value']}>{accepterSubtract}</span>
        </span>
        {
          caseDetail !== null && caseDetail.score_status === '已抽查' && (
            <>
              <span className={style.score}>
                <span className={style['score-label']}>受理抽查</span>
                <span className={style['score-value']}>{accepterExam}</span>
              </span>
            </>
          )
        }
        <span className={style.score}>
          <span className={style['score-label']}>受理均值分</span>
          <span className={style['score-value']}>{accepterRatio}</span>
        </span>
      </div>
      <div className={style.line}>
        <span className={style.score}>
          <span className={style['score-label']}>办案得分</span>
          <span className={style['score-value']}>{processerTotal}</span>
        </span>
        <span className={style.score}>
          <span className={style['score-label']}>办案加分</span>
          <span className={style['score-value']}>{processerAdd}</span>
        </span>
        <span className={style.score}>
          <span className={style['score-label']}>办案减分</span>
          <span className={style['score-value']}>{processerSubtract}</span>
        </span>
        {
            caseDetail !== null && caseDetail.score_status === '已抽查' && (
              <>
                <span className={style.score}>
                  <span className={style['score-label']}>办案抽查</span>
                  <span className={style['score-value']}>{processerExam}</span>
                </span>
              </>
            )
          }
        <span className={style.score}>
          <span className={style['score-label']}>办案均值分</span>
          <span className={style['score-value']}>{processerRatio}</span>
        </span>
        <span className={style.score}>
          <span className={style['score-label']}>案件总分</span>
          <span className={style['score-value']}>{totalScore}</span>
        </span>
      </div>
    </div>
  )
}

export default Main
